<template>
  <div class="equipment-inspection-page">
    <div class="page-header">
      <h2>
        <el-icon><View /></el-icon>
        设备巡检
      </h2>
      <el-button type="primary" @click="handleCreateInspection">
        <el-icon><Plus /></el-icon>
        新建巡检
      </el-button>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 巡检计划 -->
      <el-tab-pane label="巡检计划" name="plan">
        <el-card>
          <el-table :data="inspectionPlans" stripe>
            <el-table-column prop="name" label="计划名称" min-width="150" />
            <el-table-column prop="cycle" label="巡检周期" width="100" />
            <el-table-column prop="equipment" label="设备数量" width="100" />
            <el-table-column prop="inspector" label="巡检人" width="100" />
            <el-table-column prop="nextDate" label="下次巡检" width="120" />
            <el-table-column label="操作" width="180">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="handleExecute(row)">
                  执行巡检
                </el-button>
                <el-button size="small" @click="handleEdit(row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>

      <!-- 巡检记录 -->
      <el-tab-pane label="巡检记录" name="record">
        <el-card>
          <el-table :data="inspectionRecords" stripe>
            <el-table-column prop="code" label="巡检单号" width="150" />
            <el-table-column prop="equipmentName" label="设备名称" min-width="150" />
            <el-table-column prop="inspector" label="巡检人" width="100" />
            <el-table-column prop="date" label="巡检时间" width="160" />
            <el-table-column prop="result" label="巡检结果" width="100">
              <template #default="{ row }">
                <el-tag :type="row.result === '正常' ? 'success' : 'warning'">
                  {{ row.result }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="issues" label="发现问题" min-width="200" show-overflow-tooltip />
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button type="primary" size="small" text @click="handleViewRecord(row)">
                  查看
                </el-button>
                <el-button type="success" size="small" text @click="handleExport(row)">
                  导出
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 新建巡检对话框 -->
    <el-dialog v-model="showDialog" title="新建巡检记录" width="700px">
      <el-form :model="inspectionForm" label-width="100px">
        <el-form-item label="选择设备">
          <el-select v-model="inspectionForm.equipmentId" placeholder="请选择设备" style="width: 100%">
            <el-option label="数控车床 EQ-CNC-001" value="1" />
            <el-option label="加工中心 EQ-CNC-002" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="巡检人">
          <el-select v-model="inspectionForm.inspector" placeholder="请选择" style="width: 100%">
            <el-option label="张三" value="user1" />
            <el-option label="李四" value="user2" />
          </el-select>
        </el-form-item>
        <el-form-item label="巡检结果">
          <el-radio-group v-model="inspectionForm.result">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="abnormal">异常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发现问题" v-if="inspectionForm.result === 'abnormal'">
          <el-input v-model="inspectionForm.issues" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="处理措施" v-if="inspectionForm.result === 'abnormal'">
          <el-input v-model="inspectionForm.actions" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitInspection">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { View, Plus } from '@element-plus/icons-vue'

const activeTab = ref('plan')
const showDialog = ref(false)

const inspectionPlans = ref([
  {
    id: 1,
    name: '每日设备巡检',
    cycle: '每日',
    equipment: 12,
    inspector: '张三',
    nextDate: '2024-10-15'
  },
  {
    id: 2,
    name: '每周设备巡检',
    cycle: '每周',
    equipment: 8,
    inspector: '李四',
    nextDate: '2024-10-20'
  }
])

const inspectionRecords = ref([
  {
    id: 1,
    code: 'INS-2024-001',
    equipmentName: '数控车床',
    inspector: '张三',
    date: '2024-10-10 09:30',
    result: '正常',
    issues: '无'
  },
  {
    id: 2,
    code: 'INS-2024-002',
    equipmentName: '自动焊接机',
    inspector: '李四',
    date: '2024-10-09 14:20',
    result: '异常',
    issues: '发现异常震动'
  }
])

const inspectionForm = reactive({
  equipmentId: '',
  inspector: '',
  result: 'normal',
  issues: '',
  actions: ''
})

const handleCreateInspection = () => {
  showDialog.value = true
}

const handleExecute = (row) => {
  ElMessage.info(`执行巡检计划：${row.name}`)
}

const handleEdit = (row) => {
  ElMessage.info('编辑功能开发中')
}

const handleViewRecord = (row) => {
  ElMessage.info(`查看巡检记录：${row.code}`)
}

const handleExport = (row) => {
  ElMessage.success('导出成功')
}

const handleSubmitInspection = () => {
  showDialog.value = false
  ElMessage.success('巡检记录提交成功')
}
</script>

<style scoped>
.equipment-inspection-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

